<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-shadow: border-box;
		}
		body{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		.container{
			width: 352px;
			margin: auto;
			text-align: center;
		}
		.week,.day{
			display: flex;
			width: 350px;
			flex-wrap: wrap;
			border:1px solid #999;
		}
		.week span,.day span{
			text-align: center;
			line-height: 50px;
			width: 50px;
			height: 50px;
			box-shadow: 1px 1px 1px #999;
		}
		.h{
			color: #999;
		}
		.today{
			background: #0089ff;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="title">
			<h2><span id="nian"></span>年<span id="yue"></span>月</h2>
		</div>
		<div class="week">
			<span>日</span>
			<span>一</span>
			<span>二</span>
			<span>三</span>
			<span>四</span>
			<span>五</span>
			<span>六</span>
		</div>
		<div class="day" id="day">
			<!-- <span class="h">28</span>
			<span class="h">29</span>
			<span class="h">30</span>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
			<span>8</span>
			<span>9</span>
			<span>10</span>
			<span>11</span>
			<span>12</span>
			<span>13</span>
			<span>14</span>
			<span>15</span>
			<span>16</span>
			<span class="today">17</span>
			<span>18</span>
			<span>19</span>
			<span>20</span>
			<span>21</span>
			<span>22</span>
			<span>23</span>
			<span>24</span>
			<span>25</span>
			<span>26</span>
			<span>27</span>
			<span>28</span>
			<span>29</span>
			<span>30</span>
			<span>31</span>
			<span class="h">1</span>
			<span class="h">2</span>
			<span class="h">3</span>
			<span class="h">4</span>
			<span class="h">5</span>
			<span class="h">6</span>
			<span class="h">7</span>
			<span class="h">8</span> -->
		</div>
	</div>

	<script>
	var year = prompt("请输入年份");
	var month = prompt("请输入月份");
	// var year = 2011;
	// var month = 1;
	year = Number(year);
	month = Number(month);


	function runNian(year){
		if (year%400===0||(year%4===0&&year%100!==0)) {
			return true;
		}else{
			return false;
		}
	}


	var days = 0;

	for(var i = 1980;i<year;i++){
		if (runNian(i)) {
			days +=366;
		}else{
			days +=365;
		}
	}
	for(var k = 1;k < month;k++){

		switch(k){
			case 1:
				days +=31;
				break;
			case 2:
			if (runNian(year)) {
				days+=29;
			}else{
				days+=28;
			}
			case 3:
				days +=31;
				break;
			case 4:
				days +=30;
				break;
			case 5:
				days +=31;
				break;
			case 6:
				days +=30;
				break;
			case 7:
				days +=31;
				break;
			case 8:
				days +=31;
				break;
			case 9:
				days +=30;
				break;
			case 10:
				days +=31;
				break;
			case 11:
				days +=30;
				break;
			case 12:
				days +=31;
				break;
		}
	}

	days+=2;
	var	start = days %7;
	var day = document.querySelector("#day");
	var prevDay = 0;
	switch(month-1){
			case 0:
				prevDay +=31;
				break;
			case 1:
				prevDay +=31;
				break;
			case 2:
			if (runNian(year)) {
				prevDay+=29;
			}else{
				prevDay+=28;
			}
			case 3:
				prevDay +=31;
				break;
			case 4:
				prevDay +=30;
				break;
			case 5:
				prevDay +=31;
				break;
			case 6:
				prevDay +=30;
				break;
			case 7:
				prevDay +=31;
				break;
			case 8:
				prevDay +=31;
				break;
			case 9:
				prevDay +=30;
				break;
			case 10:
				prevDay +=31;
				break;
			case 11:
				prevDay +=30;
				break;
			case 12:
				prevDay +=31;
				break;
		}
	var thisDay=0;
	console.log(month)
	switch(month){
			case 1:
				thisDay +=31;
				break;
			case 2:
			if (runNian(year)) {
				thisDay+=29;
			}else{
				thisDay+=28;
			}
			break;
			case 3:
				thisDay +=31;
				break;
			case 4:
				thisDay +=30;
				break;
			case 5:
				thisDay +=31;
				break;
			case 6:
				thisDay +=30;
				break;
			case 7:
				thisDay +=31;
				break;
			case 8:
				thisDay +=31;
				break;
			case 9:
				thisDay +=30;
				break;
			case 10:
				thisDay +=31;
				break;
			case 11:
				thisDay +=30;
				break;
			case 12:
				thisDay +=31;
				break;
		}

	console.log(thisDay)

	for (var j= prevDay-start+1;j<=prevDay;j++){
		day.innerHTML+='<span class="h">'+j+'</span>';
	}
	var d =  new Date().getDate();
	for (var s = 1;s<=thisDay;s++){
		if (s===d) {
			day.innerHTML+='<span class="today">'+s+'</span>';
		}else{
			day.innerHTML+='<span>'+s+'</span>';	
		}
	}
	var num = 42;
	var endDay = num -start-thisDay;

	for(var e = 1;e<=endDay;e++){
		day.innerHTML+='<span class="h">'+e+'</span>';
	}
	document.querySelector("#nian").innerHTML=year;
	document.querySelector("#yue").innerHTML=month;
	</script>
</body>
</html>